<template>
    <div class="user-container">
        <el-form class="el_form" :inline="true">
            <el-form-item label="手机号：" prop="memberPhone">
                <el-input v-model="form.memberPhone" placeholder="输入团员手机号"></el-input>
            </el-form-item>
            <el-form-item label="团长手机号：" prop="leaderPhone">
                <el-input v-model="form.leaderPhone" placeholder="输入团长手机号"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
        <el-tag type="primary">推广总数：{{ countData.total }}</el-tag>
        <el-tag type="success" style="margin-left: 10px;">推广有效总数：{{ countData.available }}</el-tag>
        <el-table v-loading="tableLoading" :data="tableData.data" style="font-size: 12px"
            :cell-style="{ padding: '8px' }" border>
            <el-table-column type="index" label="#" width="55"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center" />
            <el-table-column prop="leaderPhone" label="团长手机号" align="center" />
            <el-table-column label="推广数" align="center">
                <template v-slot="scope">
                    <div v-if="!scope.row.leaderPhone" @click="openDialog(scope.row.phone, 0)">
                        {{ scope.row.total }}
                    </div>
                    <div v-else>--</div>
                </template>
            </el-table-column>
            <el-table-column label="推广有效数" align="center">
                <template v-slot="scope">
                    <div v-if="!scope.row.leaderPhone" @click="openDialog(scope.row.phone, 1)">
                        {{ scope.row.available }}
                    </div>
                    <div v-else>--</div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" />
        </el-table>
        <el-pagination background style="float: right; margin-top: 10px; margin-right: 30px"
            layout="prev, pager, next, jumper, ->, total" :page-size="tableData.size" :total="tableData.total"
            @current-change="currentChange" />
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800" center>
            <el-table v-loading="dialogLoading" :data="dialogTable.data" style="font-size: 12px"
                :cell-style="{ padding: '8px' }" border>
                <el-table-column type="index" label="#" width="55"></el-table-column>
                <el-table-column prop="leaderPhone" label="团长手机号" align="center" />
                <el-table-column prop="memberPhone" label="手机号" align="center" />
                <el-table-column prop="ip" label="IP地址" align="center" />
                <el-table-column prop="city" label="IP所在地" align="center" />
            </el-table>
            <el-pagination background style="float: right; margin-top: 10px; margin-right: 30px"
                layout="prev, pager, next, jumper, ->, total" :page-size="dialogTable.size" :total="dialogTable.total"
                @current-change="currentChange1" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { getUserData, getShareCount, getShare } from '/@/api/api'
const tableLoading = ref(false);
const form = reactive({
    leaderPhone: '',
    memberPhone: '',
})
const tableData = reactive({
    data: [],
    page: 1,
    size: 10,
    total: 0
})
const countData = reactive({
    total: 0,
    available: 0
})
const dialogTable = reactive({
    data: [],
    total: 0,
    page: 1,
    size: 10,
    leaderPhone: '',
    status: null
});
const dialogTitle = ref('推广数详情');
const dialogVisible = ref(false);
const dialogLoading = ref(false);
function getTableData() {
    tableLoading.value = true;
    const params = {
        current: tableData.page,
        size: tableData.size,
        ...form
    }
    getUserData(params).then((res: any) => {
        if (res.code == 200) {
            tableData.data = res.data.records;
            tableData.total = res.data.total;
            tableLoading.value = false;
        }
    })
}
function search() {
    tableData.page = 1;
    getTableData()
}
function resetForm() {
    form.leaderPhone = '';
    form.memberPhone = '';
    search();
}
function currentChange(val) {
    tableData.page = val;
    getTableData();
}
function getCount() {
    getShareCount().then((res: any) => {
        if (res.code == 200) {
            Object.assign(countData, res.data);
        }
    })
}
function openDialog(phone, type) {
    if (type == 0) {
        dialogTitle.value = '推广数详情';
    } else if (type == 1) {
        dialogTitle.value = '推广有效数详情';
    }
    dialogTable.leaderPhone = phone;
    dialogTable.status = type;
    dialogVisible.value = true;
    getUserPage();
}
function getUserPage() {
    dialogLoading.value = true;
    let params = {
        current: dialogTable.page,
        size: dialogTable.size,
        leaderPhone: dialogTable.leaderPhone
    }
    if (dialogTable.status) {
        params.status = dialogTable.status;
    }
    getShare(params).then((res: any) => {
        if (res.code == 200) {
            dialogLoading.value = false;
            dialogTable.data = res.data.records;
            dialogTable.total = res.data.total;
        }
    })
}
function currentChange1(val) {
    dialogTable.page = val;
    getUserPage();
}
function closeDialog() {
    dialogVisible.value = false;
    dialogTable.data = [];
    dialogTable.page = 1;
    dialogTable.total = 0;
}
onMounted(() => {
    getTableData();
    getCount();
})
</script>
<style lang='scss' scoped>
.el-table .warning-row {
    background: #fff;
}

.el-table .success-row {
    background: #f7fbff;
}

.user-container {
    padding: 20px;
}
</style>